<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ES6实现瀑布流</title>
	<style>
		*{
			margin: 0;
			padding:0;
		}
		#container{
			position: relative;
		}
		#container .box{
			padding: 5px;
			float: left;
		}
		#container .box .box-img{
			padding: 5px;
			border:1px solid #ccc;
			border-radius: 5px;
			box-shadow: 0 0 5px #ccc;
		}
		#container .box .box-img img{
			width: 230px;
			height:auto;
			/*宽度固定,高度自适应-->height :auto;
			瀑布流标准布局
			*/
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="box">
			<div class="box-img">
				<img src="images/1.jpeg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/2.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/3.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/4.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/5.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/6.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/7.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/8.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/9.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/10.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/11.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/12.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/13.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/14.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/15.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/16.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/17.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/18.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/19.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/1.jpeg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/2.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/3.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/4.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/5.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/6.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/7.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/17.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/2.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/13.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/6.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/5.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/11.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/12.jpg" alt=""/>
			</div>
		</div>
		<div class="box">
			<div class="box-img">
				<img src="images/4.jpg" alt=""/>
			</div>
		</div>
	</div>

	<script>
		var oParent = document.getElementById('container');
		window.addEventListener('load',() => {
			imgLocation('box');
			//模拟图片数据
			const imgData = [{'src': 'images/1.jpeg'},{'src': 'images/2.jpg'},{'src': 'images/3.jpg'},{'src': 'images/4.jpg'},{'src': 'images/5.jpg'},{'src': 'images/6.jpg'},{'src': 'images/7.jpg'},{'src': 'images/12.jpg'},{'src': 'images/13.jpg'},{'src': 'images/14.jpg'},{'src': 'images/15.jpg'},{'src': 'images/16.jpg'},{'src': 'images/17.jpg'}];
			//如果滑到最下面,则动态加载下面的图片
			this.addEventListener('scroll',() => {
			if(checkLoading('box')){
				imgData.map((current) => {
					const oDiv = document.createElement('div');
					oDiv.className = 'box';
					oParent.appendChild(oDiv);
					const boxImg = document.createElement('div');
					boxImg.className = 'box-img';
					oDiv.appendChild(boxImg);
					const oImg = new Image();
					//使用模拟数据,不用ajax了,嘿
					oImg.style.cssText = 'opacity: 0; transform:scale(0)';
					oImg.src = current.src;
					boxImg.appendChild(oImg);
					(function(oImg){  // 自执行程序闭包
				                    setTimeout(function(){
				                        oImg.style.cssText="transition:all 0.8s; opacity:1; transform:scale(1.0)";
				                    },300);
				                })(oImg);
				});
				imgLocation('box');
			}
			});
		});
		const checkLoading = (child) => {
			const aContent = getChilds(child);
			//最后一张图片距离顶部的高度
			const lastTop = aContent[aContent.length - 1].offsetTop;
			const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
			if(scrollTop + pageHeight > lastTop){
				return true;
			}
		}
		const imgLocation = (child) => {
			//getChilds(); 将父元素下所有符合条件的子元素取出
			const aContent = getChilds(child);
			const imgWidth = aContent[0].offsetWidth;
			//获取图片列数
			const num = ~~(document.documentElement.clientWidth / imgWidth);//也可用Math.floor()
			//图片居中
			oParent.style.cssText = 'width: ' + imgWidth*num + 'px;margin: 0 auto;';
			//获取最小高度
			const heightArr = [];
			[].map.call(aContent,(current,index) => {
				if(index < num){
					heightArr.push(current.offsetHeight);
				}else {
					//得到图片最小高度
					// 也可用const minHeight = Math.min(...heightArr);
					//const minHeight = getMin(heightArr);
					const minHeight = Math.min(...heightArr);
					//获取最小高度的序列号
					const minIndex = getMinIndex(minHeight,heightArr);
					current.style.position = 'absolute';
					current.style.top = minHeight + 'px';
					current.style.left = aContent[minIndex].offsetLeft + 'px';
					//然后更新最小高度
					heightArr[minIndex] = heightArr[minIndex] + current.offsetHeight;
				}
			});
		}
		const getChilds = (child) => {
			const childArr = [];
			const tagsAll = oParent.getElementsByTagName('*');
			//map中可传递三个参数current,index,Array
			// 数组调用map,并用call改变this指向tagsAll[];
			//也可以用Array.prototype代替[]
			[].map.call(tagsAll,(current) => {
				if(current.className == child){
					childArr.push(current);
				}
			});
			return childArr;
		}
	 	function getMin(arr){
	 		var arrLength = arr.length;
	 		//冒泡算法
	 		for(var i = 0,ret = arr[0];i<arrLength;i++){
	 			ret = Math.min(ret,arr[i]);
	 		}
	 		return ret;
	 	}
	 	function getMinIndex(minIndex,heightArr){
	 		for(var i in heightArr){
	 			if(heightArr[i] == minIndex){
	 				return i;
	 			}
	 		}
	 	}
	</script>
</body>
</html>